<template>
  <div class="header">
    <p  v-for="(item,index) in routeList" :key="index" @click="$router.push(item.path)" :class="$route.path ==item.path?'active':''">
      {{item.label}}
      <span @click.stop="close(item)">x</span>
    </p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      routeList:[{label:"工作台",path:"/home"}]
    }
  },
  methods:{
    close(item){
        this.routeList=this.routeList.filter(ite=>ite.path!==item.path);
        this.$router.push(this.routeList[this.routeList.length-1].path)
    }
  },
  watch:{
    $route(){
      /* console.log(this.$route.meta.title) */
      if(!this.routeList.some(item=>item.path==this.$route.path)){
        this.routeList.push({
          label:this.$route.meta.title,
          path:this.$route.path
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-x: auto;
  p {
    margin: 0 10px;
     white-space:nowrap;
    span {
      margin: 0 0 0 10px;
      color: #999;
    }
    padding: 10px 15px;
    height: 70%;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 5px;
  }
  .active {
    color: rgba(64, 158, 255, 1);
  }
}
</style>
